import QtQml 2.15
import QtQuick 2.15
import QtQuick.Layouts 1.15
import org.ukui.widgetBrowser 1.0
import org.ukui.quick.items 1.0
import org.ukui.quick.platform 1.0

StyleBackground {
    anchors.fill: parent

    ColumnLayout {
        anchors.fill: parent
        spacing: 0

        // 顶部拖拽条和关闭按钮
        StyleBackground {
            Layout.fillWidth: true
            Layout.preferredHeight: 32
            Layout.maximumHeight: 32
            useStyleTransparency: false
            paletteRole: Theme.BrightText
            alpha: topBarMouse.containsPress ? 0.1 : topBarMouse.containsMouse ? 0.05 : 0
            RowLayout {
                anchors.fill: parent
                Item {
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    MouseArea {
                        id: topBarMouse
                        anchors.fill: parent
                        hoverEnabled: true
                        onPressed: {
                            Window.startSystemMove();
                        }
                    }
                }
                Rectangle {
                    Layout.fillHeight: true
                    Layout.preferredWidth: height
                    Layout.margins: 4

                    color: closeMouseArea.containsMouse ? "red" : "transparent"
                    radius: 8
                    MouseArea {
                        id: closeMouseArea
                        anchors.fill: parent
                        hoverEnabled: true
                        onClicked: {
                            Window.close();
                        }
                    }
                    Icon {
                        anchors.fill: parent
                        anchors.margins: 2
                        mode: closeMouseArea.containsMouse ? Icon.ForceHighlight : Icon.AutoHighlight
                        source: "window-close-symbolic"
                    }
                }
            }
        }

        Flickable {
            id: flickable
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.margins: 40
            flickableDirection: Flickable.VerticalFlick
            contentHeight: mainView.height
            contentWidth: mainView.width

            Flow {
                id: mainView
                width: flickable.width
                spacing: 31
                property int columns: 5
                property int rows: 4
                property int cellHeight: (flickable.height - spacing*(rows-1)) / rows
                property int cellWidth: (flickable.width - spacing*(columns-1)) / columns

                Repeater {
                    model: WidgetsBrowserFilterModel {
                    }
                    delegate: Item {
                        width: mainView.cellWidth
                        height: mainView.cellHeight
                        Widget {
                            iconSource: model.Thumbnail
                            // nameText: model.Name
                            widgetId: model.Id
                        }
                    }
                }
            }
            MouseArea {
                anchors.fill: parent
                onWheel: (wheel) => {
                    flickable.flick(0, wheel.angleDelta.y * 5);
                }
            }
        }
    }
}
